import { Progress } from 'antd'
import '../assets/disk-parts.css'
import { useContext } from 'react'
import GlobalContext from './GlobalContext'
import Line from './Line'

function DiskParts(props) {
  const { t } = useContext(GlobalContext)

  return (
    <div className="parts-container">
      {props.parts &&
        props.parts.map((part, i) => {
          return (
            <div key={i}>
              <div className="parts-item">
                <div className="parts-title">
                  <div>
                    <span className="square" />
                    <span>{part.name}</span>
                  </div>
                  <div>{part.size} GB</div>
                </div>
                <div>
                  <Progress
                    percent={part.use}
                    format={(percent) => <span className="used-rate">{percent}%</span>}
                  />
                </div>
                <div className="parts-bottom">
                  <span>
                    {part.available} GB {t('free')}
                  </span>
                  <span>|</span>
                  <span>
                    {part.used} GB {t('used')}
                  </span>
                </div>
              </div>
              <Line />
            </div>
          )
        })}
    </div>
  )
}

export default DiskParts
